<template>
  <div>
    <form @submit.prevent="formHandler">
      <input type="text" placeholder="收入描述..." v-model="formData.desc" required>
      <input type="number" placeholder="金额..." v-model="formData.value" required>
      <input type="date" placeholder="日期..." v-model="formData.date" required>
      <input type="submit" value="添加">
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  props: {
    state: Object
  },
  setup (props, { emit }) {
    const formData = reactive({
      desc: null,
      value: null,
      date: null
    })

    function formHandler () {
      emit('add-income', {
        desc: formData.desc,
        value: formData.value,
        date: formData.date
      })

      formData.desc = null
      formData.value = null
      formData.date = null
    }

    return {
      formHandler,
      formData
    }
  }
}
</script>

<style scoped>
form {
  display: flex;
  justify-content: center;
  margin-top: top;
}

form input {
  color: #888;
  border: none;
  outline: none;
  font-size: 20px;
}

form input::placeholder {
  color: #aaa;
}

form input:not([type="submit"]) {
  display: block;
  background: #fff;
  border: none;
  outline: none;
  padding: 5px 15px;
}

form input[type="submit"] {
  display: block;
  background: none;
  border: none;
  outline: none;

  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 5px 15px;
  background-color: #ffce00;

  cursor: pointer;
}

form input:frist-of-type {
  border-radius: 8px 0 0 8px;
}

form input:last-of-tpye {
  border-radius: 0 8px 8px 0;
}
</style>
